<template>
  <KView class="coupon-item">
    <KView class="coupon-item-header">
      <KView class="coupon-item-header-avatar">
        <sys-avatar :url="coupon.headImg" shape="circle"></sys-avatar>
      </KView>
      <KView class="coupon-item-header-name ellipsis">{{coupon.shopName}}</KView>
    </KView>
    <KView class="coupon-item-line"></KView>
    <KView class="coupon-item-content">
      <KView class="coupon-item-content-img">
        <sys-image :src="coupon.headImg" mode="auto" :radius="8"></sys-image>
      </KView>
      <KView class="coupon-item-content-info">
        <KView class="coupon-item-title ellipsis">{{coupon.shopName}}{{coupon.money}}元优惠券</KView>
        <KView class="coupon-item-price-view">
          <KView class="coupon-item-price">
            <KView class="price-unit">¥</KView>
            <KView class="price-num">{{coupon.money}}</KView>
          </KView>
          <KView class="coupon-item-desc">满{{coupon.fullMoney}}元使用</KView>
        </KView>
      </KView>

      <KView v-if="!isSelf" class="coupon-item-content-btn">
        <KView class="coupon-item-collect" @click="collectCoupon">领取</KView>
        <KView class="coupon-item-progress">
          <KView :style="progressWidth"></KView>
        </KView>
        <KView class="coupon-item-rate">已领取{{coupon.rate}}%</KView>
      </KView>
      <KView v-else-if="coupon.status==='SENDED'" class="coupon-item-content-btn">
        <KView class="coupon-item-collect" @click="useCoupon">立即使用</KView>
      </KView>
    </KView>

    <KView v-if="isSelf" class="coupon-item-collect-icon">
      <img class="sys-img" :src="imgData.couponCollect" mode="aspectFit">
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  import SysAvatar from 'common/sysAvatar';
  import SysImage from 'common/sysImage';

  export default {
    props: {
      coupon: {
        type: Object,
        required: true
      },
      isSelf: {
        type: Boolean,
        required: false
      }
    },

    computed: {
      progressWidth() {
        let rate = this.coupon.rate;
        return {
          width: `${rate}%`
        };
      }
    },

    data() {
      return {
        imgData: GlobalData.images.sysCoupon
      };
    },

    methods: {
      collectCoupon() {
        this.$emit('collect-coupon', this.coupon);
      },

      useCoupon() {
        this.$emit('use-coupon', this.coupon);
      }
    },

    components: {
      SysAvatar,
      SysImage
    }
  };

</script>

<style lang="scss">
  .coupon-item {
    padding: formatPx(30) 0;
    box-shadow: 0 formatPx(2) formatPx(10) formatPx(5) rgba(0, 0, 0, .14);
    position: relative;
    overflow: hidden;
    border-radius: 6px;

    .coupon-item-line {
      height: 1px;
      background: #e1e1e1;
    }

    .coupon-item-header {
      padding: 0 formatPx(20);
      margin-bottom: formatPx(20);
      height: formatPx(40);
      display: flex;

      .coupon-item-header-avatar {
        width: formatPx(40);
        height: formatPx(40);
        margin-right: formatPx(12);
      }

      .coupon-item-header-name {
        flex: 1;
        line-height: formatPx(40);
        font-size: formatPx(26);
        color: #333333;
      }
    }

    .coupon-item-content {
      margin-top: formatPx(30);
      height: formatPx(162);
      padding: 0 formatPx(20);
      display: flex;

      .coupon-item-content-img {
        width: formatPx(162);
        height: formatPx(162);
        margin-right: formatPx(16);
      }

      .coupon-item-content-info {
        flex: 1;

        .coupon-item-title {
          font-size: formatPx(30);
          color: #2f3135;
          margin-bottom: formatPx(20);
        }

        .coupon-item-price-view {
          height: formatPx(50);
          display: flex;

          .coupon-item-price {
            height: 100%;
            color: #ff641f;

            >div {
              float: left;
              height: 100%;
            }

            .price-unit {
              font-size: formatPx(32);
              line-height: formatPx(60);
            }

            .price-num {
              font-size: formatPx(40);
              line-height: formatPx(50);
            }
          }

          .coupon-item-desc {
            flex: 1;
            height: 100%;
            line-height: formatPx(60);
            color: #999999;
            font-size: formatPx(24);
            margin-left: formatPx(10);
          }
        }
      }

      .coupon-item-content-btn {
        width: formatPx(125);
        margin-left: formatPx(16);

        .coupon-item-collect {
          height: formatPx(50);
          line-height: formatPx(50);
          font-size: formatPx(26);
          color: #ffffff;
          background: #59c264;
          text-align: center;
          border-radius: 6px;
          margin-bottom: formatPx(26);
        }

        .coupon-item-progress {
          height: formatPx(8);
          border-radius: formatPx(4);
          background: #efefef;
          overflow: hidden;

          >div {
            height: 100%;
            border-top-right-radius: formatPx(4);
            border-bottom-right-radius: formatPx(4);
            background: #59c264;
          }
        }

        .coupon-item-rate {
          margin-top: formatPx(26);
          font-size: formatPx(24);
          color: #999999;
          text-align: center;
        }
      }
    }

    .coupon-item-collect-icon {
      position: absolute;
      width: formatPx(102);
      height: formatPx(102);
      top: formatPx(-12);
      right: formatPx(-15);
    }
  }

</style>
